<template>
  <div class="bg-primary-300 text-white min-h-screen pt-12">
    <div class="max-w-[1440px] mx-auto px-4 pb-16">
      <!-- 空状态提示 -->
      <div v-if="movies.length === 0 && !loading" 
           class="flex flex-col items-center justify-center py-20">
        <svg xmlns="http://www.w3.org/2000/svg" 
             class="h-16 w-16 text-gray-400 mb-4" 
             fill="none" 
             viewBox="0 0 24 24" 
             stroke="currentColor">
          <path stroke-linecap="round" 
                stroke-linejoin="round" 
                stroke-width="2" 
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
        <p class="text-gray-400 text-lg">暂无相关的电影信息</p>
      </div>

      <!-- 电影列表 -->
      <MovieGrid v-else :movies="movies" />
      
      <!-- 加载状态 -->
      <div class="py-4 text-center" v-show="movies.length > 0">
        <div v-if="loading" class="flex justify-center items-center h-12">
          <LoadingSpinner />
        </div>
        <div v-else class="text-gray-400 h-12 flex items-center justify-center">
          {{ hasMore ? '下拉加载更多...' : '没有更多数据了' }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { getMovieList } from '@/api/movie'
import MovieGrid from '@/components/movie/MovieGrid.vue'
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const movies = ref([])
const loading = ref(false)
const currentPage = ref(1)
const hasMore = ref(true)

// 获取电影列表
const fetchMovies = async (page = 1) => {
  if (loading.value) return
  
  try {
    loading.value = true
    // 接受参数
    const params = { 
      page,
      // page_size: 12,
      movie_name: route.query.movie_name || '',
      category: route.query.category || '',
      region: route.query.region || ''
    }
    const response = await getMovieList(params)
    const res = response.data  // 从 response.data 提取数据
    // 第一页重置列表，其他页追加数据
    if (page === 1) {
      movies.value = res.data.items
      window.scrollTo(0, 0)  // 回到顶部
    } else {
      movies.value = [...movies.value, ...res.data.items]
    }
    
    const totalItems = res.data.total
    const currentItems = movies.value.length
    hasMore.value = currentItems < totalItems
    
    console.log('数据加载状态:', {
      当前页: page,
      总数据量: totalItems,
      当前数据量: currentItems,
      是否还有更多: hasMore.value
    })
    
    currentPage.value = page
    
  } catch (error) {
    console.error('获取电影列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 优化滚动加载逻辑
const handleScroll = () => {
  if (!hasMore.value || loading.value) return
  
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement
  const scrollPosition = scrollTop + clientHeight
  const threshold = scrollHeight - 100
  
  console.log('滚动状态:', {
    当前位置: scrollPosition,
    触发阈值: threshold,
    是否加载: scrollPosition >= threshold
  })
  
  if (scrollPosition >= threshold) {
    fetchMovies(currentPage.value + 1)
  }
}

// 监听路由参数变化
watch(
  () => route.query,
  () => {
    currentPage.value = 1
    hasMore.value = true
    fetchMovies(1)
  },
  { 
    immediate: true,  // 立即执行一次
    deep: true       // 深度监听对象变化
  }
)

// 生命周期钩子
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

